<!doctype html>
<html>
	<head>
		<title>文章拆分小工具</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="description" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
		<link rel="stylesheet" href="style.css">
		<script type="application/javascript" src="index.js"></script>
		<script type="application/javascript" src='jquery-1.8.3.js'></script>
		<script type="application/javascript">
			$(function() {
				//阻止浏览器默认行。 
				$(document).on({
					dragleave: function(e) { //拖离 
						e.preventDefault();
					},
					drop: function(e) { //拖后放 
						e.preventDefault();
					},
					dragenter: function(e) { //拖进 
						e.preventDefault();
					},
					dragover: function(e) { //拖来拖去 
						e.preventDefault();
					}
				});
				var box = document.getElementById('drop_area'); //拖拽区域 
				box.addEventListener("drop", function(e) {
					e.preventDefault(); //取消默认浏览器拖拽效果 
					var fileList = e.dataTransfer.files; //获取文件对象 
					//检测是否是拖拽文件到页面的操作 
					if (fileList.length == 0) {
						return false;
					}
					//检测文件是不是图片 
					if (fileList[0].type.indexOf('image') === -1) {
						alert("您拖的不是图片！");
						return false;
					}

					//拖拉图片到浏览器，可以实现预览功能 
					var img = window.URL.createObjectURL(fileList[0]);
					var filename = fileList[0].name; //图片名称 
					var filesize = Math.floor((fileList[0].size) / 1024);
					// 					if (filesize > 500) {
					// 						alert("上传大小不能超过500K.");
					// 						return false;
					// 					}
					var str = "<img style='width:100%;height:100%' id='fengMianImg' src='" + img + "'>";
					<!-- <p>图片名称：" + filename + "</p><p>大小：" + filesize + "KB</p> -->
					$("#drop_area").html(str);

					//上传 
					// 					xhr = new XMLHttpRequest();
					// 					xhr.open("post", "upload.php", true);
					// 					xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
					// 
					// 					var fd = new FormData();
					// 					fd.append('mypic', fileList[0]);
					// 
					// 					xhr.send(fd);
				}, false);
				var txtBox = document.getElementById('txtFile');
				txtBox.addEventListener("drop", function(e) {
					e.preventDefault(); //取消默认浏览器拖拽效果 
					var fileList = e.dataTransfer.files; //获取文件对象 
					//检测是否是拖拽文件到页面的操作 
					if (fileList.length == 0) {
						return false;
					}
					//检测文件是不是图txt文档
					if (fileList[0].type.indexOf('text/plain') === -1) {
						alert("您拖的不是txt文档！");
						return false;
					}
					var localFile = fileList[0];
					document.getElementById("txtFile").innerHTML = localFile.name
					var reader = new FileReader();
					reader.readAsBinaryString(localFile);
					var type;
					reader.onloadstart = function(event) {
						document.getElementById("topDiv").style.display = "block"
					}
					reader.onload = function(event) {
						const jschardet = require("jschardet");
						type = jschardet.detect(this.result).encoding;
						if ("GB2312" == type || "GBK" == type) {
							type = "GB18030"
						}
						var read = new FileReader();
						read.readAsText(localFile, type);
						read.onload = function(f) {
							$("#intro").empty()
							$("#chapter").empty()
							document.getElementById("chapterSize").value = ""
							document.getElementById("title").value = "";
							document.getElementById("author").value = "";
							document.getElementById("lable").value = "";
							content = f.target.result;
							$("#fileContent").text(content);
							document.getElementById("topDiv").style.display = "none";
							$("#drop_area").html("");
						}
					}
					reader.onerror = function(event) {
						alert("File could not be read! Code " + event.target.error.code);
						document.getElementById("topDiv").style.display = "none"
					}
				}, false);
			});
		</script>
	</head>
	<body>
		<div class="topDiv" id="topDiv">正在读取信息...</div>
		<div class="topDiv" id="jieTopDiv">正在解析文档...</div>
		<div style="width: 800px;margin-left: 50px;">
			<div class="div-standard" style="width: 354px;">
				<div class="div-standard-left">请选择文件:</div>
				<div id="txtFile" onclick="readTxt()" class="div-standard-right" style="border: 1px solid rgb(169, 169, 169);width: 272px;margin-top: 3px;height: 23px;line-height: 23px;text-align: center;">
					点击此处或拖拽文档到此处
				</div>
				<input type="file" style="display: none;" class="inWidth" id="uploadFile"  />
				<div style="display: none;"><div id="fileContent"></div></div>
			</div>
			<div class="div-standard" style="text-align: right;">
				<button onclick="jiexi();">解析</button>
			</div>
			<div class="div-standard">
				<div class="div-standard-left">标题:</div>
				<div class="div-standard-right">
					<input id="title" class="inWidth" />
				</div>
			</div>
			<div class="div-standard">
				<div class="div-standard-left">作者:</div>
				<div class="div-standard-right">
					<input id="author" class="inWidth" />
				</div>
			</div>
			<div class="div-standard">
				<div class="div-standard-left">标签:</div>
				<div class="div-standard-right">
					<input id="lable" class="inWidth" />
				</div>
			</div>
			<div class="div-standard" style="width: 450px;">
				<div class="div-standard-left">分类:</div>
				<div class="div-standard-right" style="width: 370px;">
					<input style="width:270px" id="fenlei" readonly unselectable="on" onclick="toFenlei()"/>
					<input type="hidden" id="fenlei_id" />
					<button onclick="toFenlei()">选择分类</button>
				</div>
			</div>
			<div class="div-standard" style="width: 100%;height: 155px;">
				<div class="div-standard-left">简介:</div>
				<div class="div-standard-right" style="width: 620px;">
					<textarea id="intro" style="width: 100%;height: 150px;resize:none"></textarea>
				</div>
			</div>
			<div class="div-standard" style="height: 270px;margin-top: 6px;">
				<div class="div-standard-left">封面:</div>
				<div class="div-standard-right">
					<input style="display: none;" type="file" id="imgFile" onchange="imgChange()" />
					<div onclick="readImg()" id="drop_area" style="width: 270px;height: 270px;border: 1px solid black;text-align: center; border-color: rgb(169, 169, 169);background: url(plus.png) no-repeat 40px 40px;">点击此处或将图片拖拽到此区域
					</div>
				</div>
			</div>
			<div class="div-standard">
				<div class="div-standard-left">章节数目:</div>
				<div class="div-standard-right">
					<input id="chapterSize" class="inWidth" readonly unselectable="on" />
				</div>
			</div>
			<div class="div-standard" style="height: 240px;">
				<div class="div-standard-left">章节列表:</div>
				<div class="div-standard-right" style="height: 240px;">
					<textarea id="chapter" style="width: 270px;height: 240px;resize:none" readonly unselectable="on"></textarea>
				</div>
			</div>
		</div>
		<div style="display: none;" id="resultContent"></div>
		<textarea style="display: none;width: 100%;height: 1000px;margin-top: 20px;" id="result"></textarea>
		<div style="width: 800px;margin-left: 50px;height: 50px;text-align: center;float: left;margin-top: 20px;">
			<button style="width: 200px;height: 50px;" onclick="saveContent()">保存</button>
		</div>
	</body>
</html>
